<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <meta name="theme-color" content="#667eea">
    <title>离职补偿计算器</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- 密码验证界面 -->
    <div id="passwordScreen" class="password-screen">
        <div class="password-container">
            <div class="password-header">
                <div class="logo-icon">🔐</div>
                <h2>请输入密码</h2>
                <p class="password-subtitle">离职补偿计算器</p>
            </div>
            <div class="password-form">
                <input type="password" id="passwordInput" placeholder="请输入6位密码" maxlength="6" autocomplete="off">
                <button onclick="checkPassword()" type="button">
                    <span class="button-text">确认</span>
                    <span class="button-icon">→</span>
                </button>
            </div>
            <p id="passwordError" class="error-message"></p>
        </div>
    </div>

    <!-- 主计算器界面 -->
    <div id="calculatorScreen" class="calculator-screen" style="display: none;">
        <div class="header">
            <h1>离职补偿计算器</h1>
            <button class="logout-btn" onclick="logout()" type="button">退出</button>
        </div>

        <div class="container">
            <!-- 基本信息 -->
            <div class="section">
                <h3>I. 基本信息</h3>
                <div class="form-group">
                    <label for="startDate">入职日期：</label>
                    <input type="date" id="startDate" onchange="calculateYears()">
                </div>
                <div class="form-group">
                    <label for="endDate">离职日期：</label>
                    <input type="date" id="endDate" onchange="calculateYears()">
                </div>
                <div class="form-group">
                    <label>在职年数：</label>
                    <span id="yearsOfService" class="calculated">0</span>
                </div>
                <div class="form-group">
                    <label>N=：</label>
                    <span id="nValue" class="calculated">0</span>
                    <small style="color: #666; margin-left: 10px;">（补偿倍数，根据在职年数确定）</small>
                </div>
                <div class="legal-basis">
                    <div class="legal-item" onclick="toggleLegalDetail('article47')">
                        <span class="legal-icon"></span>
                        <small>《劳动合同法》第四十七条</small>
                    </div>
                    <div id="article47" class="legal-content" style="display: none;">
                        <h5>《劳动合同法》第四十七条</h5>
                        <p>经济补偿按劳动者在本单位工作的年限，每满一年支付一个月工资的标准向劳动者支付。六个月以上不满一年的，按一年计算；不满六个月的，向劳动者支付半个月工资的经济补偿。</p>
                        <p>劳动者月工资高于用人单位所在直辖市、设区的市级人民政府公布的本地区上年度职工月平均工资三倍的，向其支付经济补偿的标准按职工月平均工资三倍的数额支付，向其支付经济补偿的年限最高不超过十二年。</p>
                        <p>本条所称月工资是指劳动者在劳动合同解除或者终止前十二个月的平均工资。</p>
                    </div>
                </div>
            </div>

            <!-- 政策信息 -->
            <div class="section">
                <h3>II. 政策信息</h3>
                <div class="form-group">
                    <label for="citySelect">所在省市：</label>
                    <select id="citySelect" onchange="updateCityData()">
                        <option value="">请选择城市</option>
                        <option value="beijing">北京</option>
                        <option value="shanghai">上海</option>
                        <option value="guangzhou">广州</option>
                        <option value="shenzhen">深圳</option>
                        <option value="hangzhou">杭州</option>
                        <option value="nanjing">南京</option>
                        <option value="suzhou">苏州</option>
                        <option value="chengdu">成都</option>
                        <option value="wuhan">武汉</option>
                        <option value="xian">西安</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>当地最低工资：</label>
                    <span id="minWage" class="calculated">0</span>
                    <a href="#" onclick="openMinWageQuery()" class="link" role="button">当地最低工资查询</a>
                </div>
                <div class="form-group">
                    <label>当地月平均工资：</label>
                    <span id="avgWage" class="calculated">0</span>
                    <a href="#" onclick="openAvgWageQuery()" class="link" role="button">当地月平均工资查询</a>
                </div>
                <div class="legal-basis">
                    <small>法律依据：《劳动合同法》第四十七条、《劳动合同法实施条例》第二十七条</small>
                </div>
            </div>

            <!-- 工资信息 -->
            <div class="section">
                <h3>III. 工资信息</h3>
                <div class="legal-basis">
                    <div class="legal-item" onclick="toggleLegalDetail('wageLegal')">
                        <span class="legal-icon">▼</span>
                        <small>《劳动合同法》第四十条、《劳动合同法实施条例》第二十七条</small>
                    </div>
                    <div id="wageLegal" class="legal-content" style="display: none;">
                        <h5>N+1计算基数说明（《劳动合同法实施条例》第二十七条）：</h5>
                        <div class="explanation-content">
                            <p><strong>计算基数包含内容：</strong></p>
                            <ul>
                                <li><strong>工资：</strong>计时工资、计件工资、岗位工资等固定工资收入</li>
                                <li><strong>奖金：</strong>绩效奖金、年终奖、季度奖等（按实际发放金额计入对应月份）</li>
                                <li><strong>补贴/津贴：</strong>餐补、交通补贴、住房补贴、通讯补贴等（若属于固定发放的货币性收入）</li>
                                <li><strong>其他货币性收入：</strong>如高温补贴、加班费（部分地区计入，需结合当地规定）等</li>
                            </ul>
                            <p><strong>不包含内容：</strong></p>
                            <ul>
                                <li>非货币性福利（如实物福利、体检、团建等）</li>
                            </ul>
                            <p><strong>重要限制：</strong></p>
                            <ul>
                                <li>若月平均工资高于当地上年度职工月平均工资3倍的，按3倍计算</li>
                                <li>且年限最高不超过12年</li>
                            </ul>
                            <p><strong>计算方法：</strong>N+1的计算基数应包含过去12个月的工资、奖金、餐补等所有货币性收入，需汇总后除以12得出月平均工资。</p>
                        </div>
                    </div>
                </div>
                <div class="form-group" style="align-items: start;">
                    <label style="margin-top: 10px;">近12个月<span style="color: red;">税前</span>工资：</label>
                    <div class="salary-grid">
                        <input type="number" placeholder="第1个月工资" class="salary-input" onchange="calculateAverageSalary()" step="0.01" min="0">
                        <input type="number" placeholder="第2个月工资" class="salary-input" onchange="calculateAverageSalary()" step="0.01" min="0">
                        <input type="number" placeholder="第3个月工资" class="salary-input" onchange="calculateAverageSalary()" step="0.01" min="0">
                        <input type="number" placeholder="第4个月工资" class="salary-input" onchange="calculateAverageSalary()" step="0.01" min="0">
                        <input type="number" placeholder="第5个月工资" class="salary-input" onchange="calculateAverageSalary()" step="0.01" min="0">
                        <input type="number" placeholder="第6个月工资" class="salary-input" onchange="calculateAverageSalary()" step="0.01" min="0">
                        <input type="number" placeholder="第7个月工资" class="salary-input" onchange="calculateAverageSalary()" step="0.01" min="0">
                        <input type="number" placeholder="第8个月工资" class="salary-input" onchange="calculateAverageSalary()" step="0.01" min="0">
                        <input type="number" placeholder="第9个月工资" class="salary-input" onchange="calculateAverageSalary()" step="0.01" min="0">
                        <input type="number" placeholder="第10个月工资" class="salary-input" onchange="calculateAverageSalary()" step="0.01" min="0">
                        <input type="number" placeholder="第11个月工资" class="salary-input" onchange="calculateAverageSalary()" step="0.01" min="0">
                        <input type="number" placeholder="第12个月工资" class="salary-input" onchange="calculateAverageSalary()" step="0.01" min="0">
                    </div>
                </div>
                <div class="form-group" style="align-items: start;">
                    <label style="margin-top: 20px;">奖金/其他收入：</label>
                    <div class="dynamic-form-container">
                        <div class="form-actions">
                            <button type="button" class="add-bonus-btn" onclick="addBonusRow()">+ 添加奖金</button>
                            <button type="button" class="clear-all-btn" onclick="clearAllBonuses()">清空所有</button>
                        </div>
                        <div id="bonusesContainer" class="bonuses-container">
                            <!-- 动态生成的奖金行将在这里 -->
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label>月平均工资（含奖金）：</label>
                    <span id="monthlyAvgSalary" class="calculated">0</span>
                </div>
                <div class="form-group">
                    <label>平均工资基数(A)：</label>
                    <span id="salaryBase" class="calculated">0</span>
                    <small style="color: #666; margin-left: 10px;">（月平均工资，用于计算补偿金额）</small>
                </div>
                
            </div>

            <!-- 离职补偿方案 -->
            <div class="section">
                <h3>IV. 离职补偿方案</h3>
                <div class="note" style="margin-bottom: 20px;">
                    <h5 style="color: #2c3e50; margin-bottom: 10px;">📋 N的含义说明：</h5>
                    <p><strong>N（补偿倍数）：</strong>根据员工在职年数确定的补偿倍数。具体规则如下：</p>
                    <ul style="margin: 8px 0 8px 130px;">
                        <li>不满6个月：N = 0.5</li>
                        <li>6个月以上不满1年：N = 1</li>
                        <li>N = 实际年数（向上取整）</li>
                    </ul>
                    <p><strong>N+1的含义：</strong>N个月的月平均工资 + 1个月的月工资（这里的 “1 个月工资” ,指代通知金，按劳动者解除劳动合同前的月工资计算,通常是最近一个月的正常工资，而非平均工资）。</p>
                </div>
                <div class="compensation-table">
                    <table>
                        <thead>
                            <tr>
                                <th>解除方式</th>
                                <th>通知期</th>
                                <th>方案</th>
                                <th>公式</th>
                                <th>金额</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td rowspan="2">协商解除</td>
                                <td>提前1个月通知</td>
                                <td>N</td>
                                <td>N×过去12个月的平均工资</td>
                                <td id="negotiated1Month">0</td>
                            </tr>
                            <tr>
                                <td>当天通知</td>
                                <td>N+1</td>
                                <td>N×过去12个月的平均工资 + 1个月的月工资</td>
                                <td id="negotiatedSameDay">0</td>
                            </tr>
                            <tr>
                                <td>违法解除</td>
                                <td>任何时</td>
                                <td>2N</td>
                                <td>2N×过去12个月的平均工资</td>
                                <td id="illegalTermination">0</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="legal-basis">
                    <small>法律依据：《劳动合同法》第四十七条、第四十八条、第八十七条</small>
                </div>
            </div>

            <!-- 剩余假期折算和加班费 -->
            <div class="section">
                <h3>V. 剩余假期折算和加班费</h3>
                <div class="form-group">
                    <label>日工资：</label>
                    <span id="dailyWage" class="calculated">0</span>
                </div>
                <div class="form-group">
                    <label for="remainingLeave">剩余年假（天）：</label>
                    <input type="number" id="remainingLeave" placeholder="请输入剩余年假天数" onchange="calculateLeaveAndOvertime()" min="0" step="0.5">
                </div>
                <div class="form-group">
                    <label for="weekendOvertime">周末加班天数：</label>
                    <input type="number" id="weekendOvertime" placeholder="请输入周末加班天数" onchange="calculateLeaveAndOvertime()" min="0" step="0.5">
                </div>
                <div class="form-group">
                    <label for="holidayOvertime">法定节假日加班天数：</label>
                    <input type="number" id="holidayOvertime" placeholder="请输入法定节假日加班天数" onchange="calculateLeaveAndOvertime()" min="0" step="0.5">
                </div>
                <div class="form-group">
                    <label>年假折算金额：</label>
                    <span id="leaveAmount" class="calculated">0</span>
                </div>
                <div class="form-group">
                    <label>加班费金额：</label>
                    <span id="overtimeAmount" class="calculated">0</span>
                </div>
                <div class="legal-basis">
                    <small>法律依据：《职工带薪年休假条例》第五条、《工资支付暂行规定》第十三条</small>
                </div>
            </div>

            <!-- 其他 -->
            <div class="section">
                <h3>VI. 其他</h3>
                <div class="form-group">
                    <label for="unpaidWages">欠发工资：</label>
                    <input type="number" id="unpaidWages" placeholder="请输入欠发工资" step="0.01" min="0">
                </div>
                <div class="form-group">
                    <label for="unreimbursedExpenses">未到账报销：</label>
                    <input type="number" id="unreimbursedExpenses" placeholder="请输入未到账报销" step="0.01" min="0">
                </div>
                <div class="form-group">
                    <label for="socialSecurity">社保公积金：</label>
                    <input type="text" id="socialSecurity" placeholder="交到X月份">
                </div>
            </div>

            <!-- 备注 -->
            <div class="section">
                <h3>注</h3>
                <div class="note">
                    <p>1. 经济补偿金在3倍当地平均工资以内的部分免征个人所得税。</p>
                    <p>2. 年假折算和加班费按照当前工资标准计算。</p>
                    <p>3. 以上计算结果仅供参考，具体以实际政策为准。</p>
                </div>
                <div class="legal-basis">
                    <small>法律依据：关于个人所得税法修改后有关优惠政策衔接问题的通知第五条(一)</small>
                </div>
            </div>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html> 